<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.zhimg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.zhimg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <el-row>
        <el-card class="box-card" >
            <el-row>
                <el-col :span="18">
                    <el-row :gutter="10">
                        <el-col :span="14" :lg="18">
                            <el-row>
                                <label>考试名称</label>
                                <el-input v-model="name" placeholder="请输入内容" clearable style="width: 150px" ></el-input>
                                <label>考试分类</label>
                                <template>
                                    <el-select v-model="examType" placeholder="请选择" style="width: 150px"   >
                                        <el-option
                                                v-for="item in typeOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select >
                                </template>
                                <label>考试类型</label>
                                <template>
                                    <el-select v-model="isResit" placeholder="请选择" style="width: 150px"   >
                                        <el-option
                                                v-for="item in isResitOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select >
                                </template>
                            </el-row>
                            <el-row style="top: 10px">
                                <label>考试状态</label>
                                <template>
                                    <el-select v-model="status" placeholder="请选择" style="width: 150px"   >
                                        <el-option
                                                v-for="item in statusOptions"
                                                :key="item.value"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select >
                                </template>
                            </el-row>
                        </el-col>

                        <el-col :span="4" :lg="6">
                            <el-row>
                                <el-button type="primary" style="border-radius: 0px;" @click="search">搜索</el-button>
                                <el-button type="primary" style="border-radius: 0px;" @click="clear">清空</el-button>
                            </el-row>
                        </el-col>

                    </el-row>
                </el-col>
            </el-row>
        </el-card>
    </el-row>


    <el-row>
        <el-card>
            <el-row>
                <el-col :lg="6">
                    <el-button type="primary" style="border-radius: 0px;">添加考试</el-button>
                    <el-button type="primary" style="border-radius: 0px;">考试指派</el-button>
                </el-col>
            </el-row>
            <el-row style="top: 10px">
                <el-col  :span="18"  :lg="18" >
                    <template>
                        <el-table :data="tableData" border style="width: 100%">
                            <el-table-column
                                    prop="id"
                                    label="考试编号"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="name"
                                    label="考试名称"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="type"
                                    label="考试分类"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="isResit"
                                    label="考试类型"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ isResitMap[scope.row.isResit] }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="timingLength"
                                    label="考试时长"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="paperStructure.questionTotalScore"
                                    label="总分"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    label="及格分"
                                    width="100">
                                <template slot-scope="scope">
                                    <span style="margin-left: 10px">{{ scope.row.paperStructure.questionTotalScore * 0.6 }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="status"
                                    label="状态"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    fixed="right"
                                    label="操作"
                                    width="150">
                                <template slot-scope="scope">
                                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                                    <el-button type="text" size="small">编辑</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-col>
                <el-col :span="10" :lg="10">
                    <div class="block" style="position: relative; left: 50%;">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 50, 100, 200]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </el-row>

</div>

<script>
    new Vue({
        el:"#app",
        data:{
            name:"",
            examType:'',
            typeOptions:[],
            isResit:'',
            isResitOptions:[],
            status:'',
            statusOptions:[],
            tableData:[],
            isResitMap:{
                '0':'统一考试',
                '1':'自由考试（补考）'
            },
            currentPage:1,
            pageSize:10,
            total:0,
        },
        mounted(){
            this.storage=window.localStorage;
            this.token=this.storage.getItem("token");
            this.refreshToken=this.storage.getItem("refreshToken");
            axios.get("/exam/allByPage",{
                headers:{
                    "token":this.token,
                    "refreshToken":this. refreshToken
                }
            }).then(res=>{
                if(res.data.code==200){
                    this.tableData=res.data.data.list;
                    this.total=res.data.data.total;
                }
            })
        },
        methods:{
            search(){
                let param = new URLSearchParams()
                param.append("name",this.name);
                param.append("type",this.examType);
                param.append("isResit",this.isResit);
                param.append("status",this.status);
                param.append("pageNum",this.currentPage);
                param.append("pageSize",this.pageSize);
                axios.post("/exam/caps",param,{
                    headers:{
                        "token":this.token,
                        "refreshToken":this. refreshToken
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            },
            clear(){
                this.currentPage=1;
                let param = new URLSearchParams()
                param.append("name",this.name);
                param.append("type",this.examType);
                param.append("isResit",this.isResit);
                param.append("status",this.status);
                param.append("pageNum",this.currentPage);
                param.append("pageSize",this.pageSize);
                axios.post("/exam/caps",param,{
                    headers:{
                        "token":this.token,
                        "refreshToken":this. refreshToken
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            },
            handleClick(row) {
                this.storage=window.localStorage;
                this.token=this.storage.getItem("token");
                this.refreshToken=this.storage.getItem("refreshToken");
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage=1;
                this.pageSize=val;
                let param = new URLSearchParams();
                param.append("name",this.name);
                param.append("type",this.examType);
                param.append("isResit",this.isResit);
                param.append("status",this.status);
                param.append("pageNum",this.currentPage);
                param.append("pageSize",val);
                axios.post("/exam/caps",param,{
                    headers:{
                        "token":this.token,
                        "refreshToken":this. refreshToken
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })


            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
                let param = new URLSearchParams();
                param.append("name",this.name);
                param.append("type",this.examType);
                param.append("isResit",this.isResit);
                param.append("status",this.status);
                param.append("pageNum",val);
                param.append("pageSize",this.pageSize);
                axios.post("/exam/caps",param,{
                    headers:{
                        "token":this.token,
                        "refreshToken":this. refreshToken
                    }
                }).then(res=>{
                    if(res.data.code==200){
                        this.tableData=res.data.data.list;
                        this.total=res.data.data.total;
                    }
                })
            }
        }

    })


</script>
</body>
</html>